import React, { Component, createRef } from 'react'

export default class App extends Component {

    // 1. 创建一个 ref 属性
    inpRef = createRef()

  render() {
    return (
      <div>
        
        {/* <input type="text" ref={'inp'} /> */}

        {/* 2. 设置 ref 属性为 inpRef */}
        <input type="text" ref={this.inpRef} />

        <button onClick={()=>{
            // 可以通过设置一个固定的 ref 来进行获取，但是该方法 this.refs
            // 已经被废弃了，即将被移除了，所以这一类方法都不太推荐使用
            // console.log(this.refs.inp.value);

            // 直接找到 DOM 元素进行获取值
            // console.log(document.querySelector('input').value);

            // 3. 获取元素 this.inpRef.current
            // current: 是当前元素，该写法是固定写法
            console.log(this.inpRef.current);

        }}>获取 Input 中的内容</button>

      </div>
    )
  }
}
